<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 商品类别管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/product-category.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/productCategory.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--头部开始-->
		<div id="head-div">

		</div>
		<!--头部结束-->
		<script>
			$("#head-div").load("head.html");
		</script>

		<!-- 页面主体部分 -->
		<section class="container mt-2" style="height: 250px">
			<div class="h4 border-bottom">
				<span>商品类别管理</span>
				<small class="float-right">
					<a href="#modal-add-category" class="btn btn-sm btn-outline-success py-0" data-toggle="modal">新增商品类别</a>
				</small>
			</div>

			<ul class="list-unstyled mt-3 product-category" id="parent">

			</ul>
		</section>

		<!-- 新增商品分类模态框部分 -->
		<div id="modal-add-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th-list"></i>
							<span>新增商品类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-category" >
							<div class="form-group form-row pl-2">
								<div class="form-check-inline">
									<input id="ctype1" type="radio" name="ctype" value="hide" checked="checked" class="form-check-input" />
									<label for="ctype1" class="form-check-label" >商品主类别</label>
								</div>
								<div class="form-check-inline">
									<input id="ctype2" type="radio" name="ctype" value="show" class="form-check-input" />
									<label for="ctype2" class="form-check-label" name="id">商品子类别</label>
								</div>
							</div>

							<div id="list-primary-category" class="collapse collapsed">
								<div class="form-group form-row">
									<label class="col-form-label pr-3 mr-2">父类别</label>
									<select class="col form-control" id="parName">

									</select>
								</div>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label pr-2">类别名称</label>
								<input type="text" class="col form-control" required="required" id="nameVal" name="name"/>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-category" type="button" id="sava-btn">新增商品类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增商品分类模态框部分结束 -->

		<!-- 编辑商品主类别模态框部分 -->
		<div id="modal-edit-primary-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th-large"></i>
							<span>编辑商品主类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-primary-category">
							<div class="form-group form-row">
								<label class="col-form-label">类别名称</label>
								<input type="text" class="col form-control" required="required" value="" id="patName" name="name"/>
								<input type="hidden" class="col form-control" required="required" value="" name="id"/>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-primary-category" type="button" id="update-parent-btn">更新商品主类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品主类别模态框部分结束 -->

		<!-- 编辑商品子类别模态框部分 -->
		<div id="modal-edit-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th"></i>
							<span>编辑商品子类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-category" action="">
							<div class="form-group form-row">
								<label class="col-form-label pr-3 mr-2">父类别</label>
								<select class="col form-control" required="required">
									<option id="parentName"></option>
								</select>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label pr-2">类别名称</label>
								<input type="text" class="col form-control" required="required" value="单西" />
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-category" type="button" id="update-sons-btn">更新商品子类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品子类别模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!--脚部分开始-->
		<div id="footer-div">

		</div>
		<!--脚部分结束-->
		<script>
			$("#footer-div").load("footer.html");
		</script>

	</body>

</html>
